<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="chooseHobby">
        <h3>请选择你喜欢的专栏</h3>
        <label v-for="hobby in hobbies" :key="hobby.id"> <input type="checkbox" :value="hobby.name" v-model="hobby.selected">{{hobby.name}}</label>
        <ul>
            <li v-for="hobby in hobbies" :key="hobby.id" v-if="hobby.selected">{{hobby.name}}</li>
        </ul>
    </div>

    <script src="../day01_homework/12306订单详情/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#chooseHobby',
            data: {
                hobbies:[
                    {id: 1, name: '前端', selected: false},
                    {id: 2, name: 'ios', selected: false},
                    {id: 3, name: 'android', selected: false},
                    {id: 4, name: 'flutter', selected: false},
                    {id: 5, name: 'uniapp', selected: false},
                    {id: 6, name: 'RN', selected: false},
                    {id: 7, name: 'JAVA', selected: false},
                    {id: 8, name: 'Python', selected: false},
                ]
            }
        })


    </script>
</body>
</html>